<template>
  <v-container fluid class="error-page">
    <v-row justify="center" align="center" class="fill-height">
      <v-col cols="12" md="8" lg="6" class="text-center">
        <!-- 404图标 -->
        <div class="error-icon mb-6">
          <v-icon size="120" color="primary" class="animate-bounce">
            mdi-alert-circle-outline
          </v-icon>
        </div>
        
        <!-- 错误代码 -->
        <h1 class="error-code text-h1 font-weight-bold text-primary mb-4">
          404
        </h1>
        
        <!-- 标题 -->
        <h2 class="text-h4 font-weight-bold mb-4">
          {{ $t('error.notFound.title') }}
        </h2>
        
        <!-- 副标题 -->
        <p class="text-h6 text-grey-darken-1 mb-4">
          {{ $t('error.notFound.subtitle') }}
        </p>
        
        <!-- 描述 -->
        <p class="text-body-1 text-grey-darken-2 mb-8">
          {{ $t('error.notFound.description') }}
        </p>
        
        <!-- 操作按钮 -->
        <div class="action-buttons">
          <v-btn
            color="primary"
            size="large"
            elevation="2"
            class="mr-4 mb-2"
            @click="goHome"
          >
            <v-icon left>mdi-home</v-icon>
            {{ $t('error.notFound.backHome') }}
          </v-btn>
          
          <v-btn
            variant="outlined"
            color="primary"
            size="large"
            class="mb-2"
            @click="goBack"
          >
            <v-icon left>mdi-arrow-left</v-icon>
            {{ $t('message.back') || '返回上页' }}
          </v-btn>
        </div>
        
        <!-- 错误代码显示 -->
        <p class="text-caption text-grey mt-8">
          {{ $t('error.notFound.errorCode') }}
        </p>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'NotFoundPage',
  head: {
    title: '页面未找到 - 404',
    meta: [
      {
        name: 'description',
        content: '页面未找到，请检查URL是否正确或返回首页'
      }
    ]
  },
  methods: {
    goHome() {
      this.$router.push('/')
    },
    goBack() {
      // 如果有历史记录则返回上一页，否则跳转到首页
      if (window.history.length > 1) {
        this.$router.go(-1)
      } else {
        this.$router.push('/')
      }
    }
  }
}
</script>

<style scoped>
.error-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.error-code {
  font-size: 8rem !important;
  line-height: 1;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.error-icon {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.action-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 600px) {
  .error-code {
    font-size: 6rem !important;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .action-buttons .v-btn {
    width: 200px;
    margin: 4px 0 !important;
  }
}

/* 添加一些视觉效果 */
.v-container {
  position: relative;
}

.v-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 200, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}
</style>